<template>
  <div>
    <div class="bg" v-for="(item, index) in imglist" :key="item.src" :style="item" :class="{ active: isshow[index] }" ref="bg"></div>
    <swiper :options="swiperOption" ref="mySwiper" id="swiper-dream">
      <!-- slides -->
      <swiper-slide><dream-index></dream-index></swiper-slide>
      <swiper-slide><crowd-funding></crowd-funding></swiper-slide>
      <swiper-slide><dream-show></dream-show></swiper-slide>
      <swiper-slide><crowd-funding-detail></crowd-funding-detail></swiper-slide>
      <swiper-slide><dream-show-detail></dream-show-detail></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination " slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import dreamIndex from './child/dreamIndex.vue';
import crowdFunding from './child/crowdFunding.vue';
import dreamShow from './child/dreamShow.vue';
import crowdFundingDetail from './child/crowdFundingDetail.vue';
import dreamShowDetail from './child/dreamShowDetail.vue';
export default {
  name: 'dream',
  data() {
    return {
      //页面滑动相关
      swiperOption: {
        direction: 'vertical', //页面切换方式（水平与垂直）
        slidesPerView: 1, //每次显示页数
        spaceBetween: 30, //页面间距离
        mousewheel: true, //是否开启鼠标滚轮控制
        // autoplay:true,
        // autoplay: {
        //     delay: 10000,
        //     stopOnLastSlide: false,
        //     disableOnInteraction: true,
        //     },//自动切换
        autoHeight: true, //当autoHeight为启用状态，设置更新swiper高度的时间
        height: window.innerHeight,
        pagination: {
          el: '.swiper-pagination ',
          bulletElement: 'li', //分页器html标签
          clickable: true //参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
        }
      },
      //背景切换
      imglist: [],
      idx: 0,
      isshow: []
    };
  },
  components: {
    dreamIndex,
    crowdFunding,
    dreamShow,
    crowdFundingDetail,
    dreamShowDetail
  },
  methods: {
    //背景切换
    autoToggleBg() {
      this.baqhfn = setInterval(() => {
        this.idx++;
        this.$nextTick(() => {
          if (this.idx == 4) {
            this.$refs.bg[this.idx - 1].classList.remove('active');
            this.$refs.bg[this.idx - 2].classList.remove('active');
            this.idx = 1;
          }
          if (this.$refs.bg[this.idx - 2]) {
            this.$refs.bg[this.idx - 2].classList.remove('active');
          }
          this.$refs.bg[this.idx].classList.add('active');
        });
      }, 6000);
    }
  },
  watch: {},
  computed: {
    //页面滑动
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  created() {
    //背景切换
    for (let i = 1; i <= 4; i++) {
      this.imglist[i - 1] = {
        opacity: 0,
        backgroundImage: `url(../../assets/image/dream/dreamback-${i}.jpg)`
      };
      this.isshow[i] = false;
    }
    this.imglist[0].opacity = 1;
    //到上面都是
  },
  mounted() {
    document.body.style.overflow = 'hidden';
    //背景切换
    this.autoToggleBg();
  },
  destroyed() {
    clearInterval(this.baqhfn);
    document.body.style.overflowY = 'scroll';
  }
};
</script>

<style scoped lang="scss">
@import 'swiper.css';
//页面切换
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  //background-color: antiquewhite;
  //background-image: url("http://www.cctf.org.cn/d/file/index/2016-08-17/369219cf8d7f12a964bb20d27d76fa83.jpg");
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background: transparent;
}

.swiper-pagination {
  margin-right: 3%;
  bottom: 10%;
}

//背景设置
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url(`\assets/image/dream/dreamback-1.jpg`) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.bg.active {
  animation: show 5s;
  animation-fill-mode: forwards;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    display: block;
  }
}
</style>
<style>
#swiper-dream {
  /* background-image: url("../../assets/image/dream/img-dream-back-1.png");
		background-repeat:no-repeat;
		background-size: 100% 100%; */
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 18px 0;
}
.swiper-pagination-bullet {
  height: 5px;
  width: 5px;
  background: white;
  opacity: 1;
}
.swiper-pagination-bullet:hover {
  transform: scale(1.5);
}

.swiper-pagination-bullet-active {
  transform: scale(2);
  background: white;
  opacity: 1;
  border-radius: 5px;
}
.swiper-pagination-bullet-active:after {
  top: -4px;
  left: -4px;
  bottom: -4px;
  right: -4px;
  background: rgba(255, 255, 255, 0.35);
  position: absolute;
  content: '';
  display: block;
  border-radius: 100%;
}
</style>
